<template>
    <div class="journey">
    	<Header :show="true">报名人员</Header>
    	<div class="content">
    		<ul>
    			<li>
    				<div><img src="../../assets/img1.jpg" alt=""></div>
    				<p>王宾</p>
    			</li>
    			<li>
    				<div><img src="../../assets/img2.jpg" alt=""></div>
    				<p>蒋少川</p>
    			</li>
    			<li>
    				<div><img src="../../assets/img3.jpg" alt=""></div>
    				<p>杨丹</p>
    			</li>
    			<li>
    				<div><img src="../../assets/img4.jpg" alt=""></div>
    				<p>何必执着</p>
    			</li>
    			<li>
    				<div><img src="../../assets/img2.jpg" alt=""></div>
    				<p>久而久之</p>
    			</li>
    			<li>
    				<div><img src="../../assets/img5.jpg" alt=""></div>
    				<p>王宾</p>
    			</li>
    			<li>
    				<div><img src="../../assets/img4.jpg" alt=""></div>
    				<p>陈景聪</p>
    			</li>
    			<li class="plus">
    				<span>+</span>
    			</li>
    		</ul>
    	</div>
    </div>
</template>

<script>
import Header from '../base/Header'
	export default {
        components:{
        	Header
        }
	}
</script>

<style scoped lang="less">
	.journey{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 111;
		background: #fff;
		.content{
			margin: 50px 10px 0;
			ul{
				li{
					width: 20%;
					float: left;
					padding-top: 10px;
					div{
						width:80%;
						margin: 0 auto;
						img{width: 100%;height: 1.15rem;border-radius: 4px;}
					}
					p{font-size: 0.3rem;text-align: center;}
				}
				.plus{
					width: 1.15rem;
					height: 0.96rem;
					line-height: 1rem;
					border: 1px solid #888;
					border-radius: 4px; 
					margin-top: 10px;
					text-align: center;
					position: relative;
					span{
						color: #666;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-58%);
					}
				}
			}
		}
	}
</style>